<template>
	<div
		:class="['widget-item', { 'widget-item-select': selectItem }]"
		@click.stop="domItemClick"
	>
		<template v-if="selectItem">
			<el-icon class="delete-icon" @click="delWidget">
				<DeleteFilled />
			</el-icon>
		</template>
		<slot />
	</div>
</template>
<script setup lang="ts">
import { defineOptions, ref, defineProps, computed } from 'vue'
import { DeleteFilled, CopyDocument } from '@element-plus/icons-vue'
import { useTargetStore } from '@/store/modules/target'

defineOptions({
	name: 'Widget'
})
const emit = defineEmits(['delWidget'])
const storeTarget = useTargetStore()
const props = defineProps({
	options: {
		type: Object,
		required: true
	},
	isDesign: {
		type: Boolean,
		default: false
	}
})

const selectItem = computed(() => {
	return props.isDesign && storeTarget.currentId === props.options.i
})

const domItemClick = () => {
	storeTarget.setActiveTarget(props.options)
}

const delWidget = () => {
	emit('delWidget', props.options)
}
</script>
<style lang="scss" scoped>
.widget-item {
	flex: 1;
	position: relative;
	&-select {
		margin: -1px;
		border: 1px solid #409eff;
	}
	.delete-icon {
		position: absolute;
		right: 4px;
		top: 4px;
		z-index: 30;
		cursor: pointer;
		color: #f57474;
		background: #fff;
		padding: 0 6px;
		&:hover {
			color: #ff9c9c;
		}
	}
	.copy-icon {
		position: absolute;
		right: 24px;
		top: 4px;
		z-index: 30;
		cursor: pointer;
		color: #409eff;
		&:hover {
			color: #79bbff;
		}
	}
}
</style>
